web6047 2022年 ８月

プログラミングやRPG（作るほう）が好きな人の日記

買い物も映画と同じく、公私それぞれ★ 3.5 以上で黄色塗りにします。★2.9以下は青塗りにします。 ■■であれば公私ともに落第点。■■や■■であれば公私で意見が分かれている。■■であれば公私ともにGOOD。白塗りは可もなく不可もなく。

2022/8/31（水）

PC-9801用　Windows 3.1　その２

2022/8/26（金）に Yahoo オークションで私が入札した、Windows 3.1 ですが、見事競り落とせました。

おめでとう。落札価格は 1 万円でした。（Windows 3.1 発売当時の定価はだいたい 2 万円だったそうです）

でもまた、入札者私一人だったので、誰とも競っていません。

Windows 3.1 っていつ頃登場したんだっけ…

Wikipedia によると、1991 年。

今から 31 年前ですねぇ。

31 年前のフロッピーディスク…大丈夫かな。

Windows 3.1 を買う理由は、「はじめて読む４８６」（リンクは Amazon 当該ページ）の一部のテストプログラムが、Windows 3.1 用だからです。

それを試すためには、買う必要があると。それだけ。

そして、Windows 3.1 をどこにインストールするのかというと、おもに 「Neko Project」という PC-9801 エミュレーター上にインストールしようと考えています。

2022/8/28（日）

Excel 図形 → JavaScript 変換　その６

Excel の図形を VBA を使って、.js テキストファイルへ書き出して、JavaScript でその図形を表示する…、というようなことに取り組んでいます。。

前回記事で書いたように、一部の図形（楕円など）はそのままでは 3D 計算できない情報で構成されているので、その情報をベジェ曲線データへ変換する必要があります。

で、実際にベジェ曲線を 3D 回転させようというとき、「配列」などどんなデータ形式なら、扱いやすいのか確認するために、JavaScript での 3D 回転のサンプルを作りました。

前々からこの手の 3D 回転はやってきましたが、改めて、ということで…

こういう画面を見ると、ある人は、「WebGL を使ってるのかな」と思うだろうし、ある人は「難しそうだ」と思うでしょう。

でもこれは WebGL のような難しいものは使っていないし、また、3D 計算ではあるけど、3D 計算というのはもともと「難しい数学が不要」で、四則演算と、ちょっとの sin, cos ができれば、できるものなんです。

上の 3D の回転は、下のプログラムでできていますが、ざっとみても、Three.js などの 3D のライブラリにはアクセスしていないし、行列計算も行っていません。

立方体とネコを 3D 回転するプログラム：
test2[20180202-obj／Microsoft Excel]

class App {

constructor( canvas ) {

this.cc = canvas.getContext( "2d" );

this.cc.canvas.width = 512;

this.cc.canvas.height = 448;

this.timerId = null;

this.objectz = {

//====================cube

cube : { //unit: mm

type : 0, //normal

name : "cube",

close : true, //各面は最後に cc.closePath() を行うか

ccPropz : {

fillStyle : "rgba(250,250,100,0.5)",

strokeStyle : "black",

lineWidth : 1,

lineJoin : "round",

},

tens : [

{ x : -1, y : +1, z : -1 }, //0: 左上　手前

{ x : +1, y : +1, z : -1 }, //1: 右上　手前

{ x : +1, y : -1, z : -1 }, //2: 右下　手前

{ x : -1, y : -1, z : -1 }, //3: 左下　手前

{ x : -1, y : +1, z : +1 }, //4: 左上　奥

{ x : +1, y : +1, z : +1 }, //5: 右上　奥

{ x : +1, y : -1, z : +1 }, //6: 右下　奥

{ x : -1, y : -1, z : +1 }, //7: 左下　奥

],

center : { x : 0, y : 0, z : 0 }, //tensが示すモデルの、中心座標

mens : [

[ 0, 1, 2, 3 ], //正面

[ 0, 4, 5, 1 ], //天面

[ 0, 3, 7, 4 ], //左面

[ 2, 6, 7, 3 ], //下面

[ 4, 7, 6, 5 ], //背面

[ 1, 5, 6, 2 ], //右面

],

size : 700,

pos : { x : -800, y : 0, z : 6000 },

rotation : { x : 0, y : 0, z : 0 },

},

//====================cat

bezier : {

type : 1, //bezier

name : "neko",

close : true, //各面は最後に cc.closePath() を行うか

ccPropz : {

fillStyle : "pink",

strokeStyle : "rgb(200,50,150)",

lineWidth : 4,

lineJoin : "round",

},

tens : [

{ x : 478, y : 165, z : 0 }, //1

{ x : 506, y : 162, z : 0 }, //2

{ x : 535, y : 162, z : 0 }, //3

{ x : 563, y : 165, z : 0 }, //4

{ x : 573, y : 147, z : 0 }, //5

{ x : 578, y : 129, z : 0 }, //6

{ x : 592, y : 111, z : 0 }, //7

{ x : 664, y : 206, z : 0 }, //8

{ x : 666, y : 339, z : 0 }, //9

{ x : 521, y : 340, z : 0 }, //10

{ x : 381, y : 339, z : 0 }, //11

{ x : 380, y : 206, z : 0 }, //12

{ x : 450, y : 111, z : 0 }, //13

{ x : 464, y : 130, z : 0 }, //14

{ x : 469, y : 147, z : 0 }, //15

{ x : 478, y : 165, z : 0 }, //16

],

center : { x : 478, y : 230, z : 0 }, //tensが示すモデルの、中心座標

mens : [

[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15 ],

],

size : 6,

pos : { x : 800, y : 0, z : 6000 },

rotation : { x : 0, y : 0, z : 0 },

},

//====================

}//objects{}

//カメラ

this.cam = {

s : 50, //焦点距離（何mmレンズ）

zoom : 14, //引き伸ばし

}

}//constructor()

start() {

//動作を開始する

//check.　すでに動作中

if( this.timerId ) return;

this.tmBak = 0;

this.frame( 0 );

}

stop() {

//動作を停止する

//check.　すでに停止中

if( this.timerId == null ) return;

cancelAnimationFrame( this.timerId );

this.timerId = null;

}

frame( tm ) {

if( tm - this.tmBak >= 100 ) { //ミリ秒ごとに

this.tmBak = tm;

//各オブジェクトを回転

let add = 0.01;

for( let name in this.objectz ) {

let object = this.objectz[ name ];

object.rotation.x += add;

object.rotation.y += add;

object.rotation.z += add;

}

this.draw( this.cc );

}

this.timerId = requestAnimationFrame( this.frame.bind( this ) );

}

draw( cc ) {

cc.clearRect( 0, 0, this.cc.canvas.width, this.cc.canvas.height );

cc.save();

cc.translate( this.cc.canvas.width / 2, this.cc.canvas.height / 2 );

cc.scale( 1, -1 );

//各オブジェクトについて

for( let name in this.objectz ) {

let object = this.objectz[ name ];

for( let propName in object.ccPropz ) {

cc[ propName ] = object.ccPropz[ propName ];

}

let bezierPs = new Array();

//１オブジェクトを構成する各面について

for( let i = 0; i < object.mens.length; i++ ) {

let men = object.mens[ i ];

cc.beginPath();

//１面を構成する各点について

for( let j = 0; j < men.length; j++ ) {

let tenIdx = men[ j ];

let ten = object.tens[ tenIdx ];

//ローカル座標

let x = ( ten.x - object.center.x ) * object.size;

let y = ( ten.y - object.center.y ) * object.size;

let z = ( ten.z - object.center.z ) * object.size;

//x, y, z軸回転（自転）

if( object.rotation.x ) {

let res = this.rotate( z, y, object.rotation.x );

z = res.x;

y = res.y;

}

if( object.rotation.y ) {

let res = this.rotate( x, z, object.rotation.y );

x = res.x;

z = res.y;

}

if( object.rotation.z ) {

let res = this.rotate( x, y, object.rotation.z );

x = res.x;

y = res.y;

}

//ワールド座標へ移動

x += object.pos.x;

y += object.pos.y;

z += object.pos.z;

//3D -> 2D

let h = x * ( this.cam.s / z ) * this.cam.zoom;

let v = y * ( this.cam.s / z ) * this.cam.zoom;

//描画

if( j == 0 ) {

cc.moveTo( h, v ); //最初

} else {

//2回目以降

if( object.type == 0 ) {

//cube

cc.lineTo( h, v );

} else {

//bezier

bezierPs.push( h, v );

//check.　bezierCurveTo() の引数がそろった

if( bezierPs.length == 6 ) {

cc.bezierCurveTo( ...bezierPs );

bezierPs.length = 0;

}

}

}

}//for j　各点

if( object.close ) cc.closePath();

cc.fill();

cc.stroke();

}//for i　各面

}//for name　各オブジェクト

cc.restore();

}//draw()

//数学　回転計算

rotate( x, y, theta2 ) {

let theta1 = Math.atan2( y, x );

let hankei = Math.sqrt( x * x + y * y );

return {

x : Math.cos( theta1 + theta2 ) * hankei,

y : Math.sin( theta1 + theta2 ) * hankei,

}

}//rotate()

}//App

データの部分を見てしまうと難しそうに見えるかもしれませんが、このプログラムの 3D としての中心的な計算は、181行と、182行の

//3D -> 2D
let h = x * ( this.cam.s / z ) * this.cam.zoom;
let v = y * ( this.cam.s / z ) * this.cam.zoom;

この計算です。

3D 計算というのは、このように実は四則演算だけで描画されています。

で、肝心のベジェ曲線のデータ形式ですが、他の 3D のオブジェクトと同じように、tens という配列の中にベジェのデータを入れるのが良いかなと思います。

2022/8/27（土）

Excel 図形 → JavaScript 変換　その５

私は最近、Excel 上の図形を JavaScript で表示することを考えています。

Excel 上の図形のデータを取り出して、JavaScript で読めるテキストファイルにおさめるだけなら、まだ簡単でしたが、Excel は楕円などの図形を、長半径と短半径、楕円の座標、というようなおおざっぱな情報で表現しているので、JavaScript で 3D 回転などを行いたい場合は、ベジェ曲線に変換しなければなりません。

そこで、今日は、「楕円」を「ベジェ曲線」に変換するプログラムのお話をします。

▼「楕円」を「ベジェ曲線」に変換

▼ベジェ曲線とはハンドルを動かして形を自由に変えられる図形です。

▼図形を 3D 回転させる

楕円→ベジェ変換プログラムの動きを試す

変換プログラムは大変だったんですが、何とかできました。

JavaScript で楕円を描く際の標準のメソッドであるellipse() の描画（オレンジ太線）と、私の自作のベジェ曲線による楕円の描画（青い細線）が一致している様子を下のフォームをいじって確認できます。

There is no canvas.

標準の cc.ellipse() の場合の記述と、ベジェの場合の記述

通常、JavaScript で楕円を描画するときは、以下のようにします。

※以降、cc は、canvas.getContext( "2d" ) で得られる Canvas Context です。

cc.beginPath();
cc.ellipse( 0, 0, a, b, 0, startAngle, endAngle, isReverse );
cc.stroke();

この標準の記述となるべく同じ記述になるように（わかりやすくするために）、プログラムを工夫しました。

以下は、今回作成した変換プログラム（関数）を利用している様子です。

let array = ellipse2bezierPoints( 0, 0, a, b, startAngle, endAngle, isReverse );

cc.beginPath();
drawBezierPoints( cc, array );
cc.stroke();

この、ellipse2bezierPoints() が楕円情報をベジェデータに変換する関数で、drawBezierPoints() がそのベジェデータを画面に描画する関数です。

この２つの関数を少し詳しく紹介します。

自作 JavaScript 関数 ellipse2bezierPoints()

ellipse2bezierPoints() は、標準の cc.ellipse() と同じような引数を取りますが、楕円は描画せずに、「ベジェ曲線のデータ」を作成して返します。

やや長めの関数になっており、行っている処理は、少し複雑になっています。

ellipse2bezierPoints() 関数の流れ：

1. 楕円をベジェ曲線で描くときは、数学のグラフを座標軸で4分割したときの「象限」単位で描かれる。
   （前回紹介したこのサイトさんの情報をもとに楕円のベジェ曲線を作ると、4半円が描かれました）
   そのため、楕円をベジェ曲線に変換する際は、象限ごとにベジェ曲線を作成する。
   なので、まずは for 文で角度を楕円の開始角度から終了角度まで 0.1 ずつ進めて、４つの象限をどの順番でたどるのかを検出する。
   （…という方法を私は取りましたが、もっと良い方法が世間にはあると思います）
2. とりあえず、その１つの象限で描画される楕円の一部（4半円）を描くベジェ曲線を得る。
   （下記プログラムリスト 76 行目、let currentBezier = ellipseBeziers[ shogen ]; でそれを行っています）
   

3. ある変数 t を 0 から 1 まで 0.01 ずつ進めると、１つのベジェ曲線を形作る約 100 個（99個かな？）の点を得られるという考え方でプログラムする。
   （下図は変数 t を 0 から 1 まで 0.25 ずつ進めて、3個の点を得ている例です）
   

   

   その１つ１つの点を算出するときに使用する「過程の点」と、その算出結果である「結果の点」を得る。
   （下記プログラムリスト 870 行目、let bo = getBezierObject( t, currentBezier ); でそれを行っています）
   

   

4. 『その「結果の点」を Math.atan2() の引数に入れて得られる角度が、描こうとする楕円の開始角度と終了角度の範囲内であるかどうか』を判定する。
   （この判定がえらく難しかった。プログラムの 41 ～ 53 行の diffAngle を求めるところ。判定自体は 100 行目です）
   

   

   その判定によって、「4半円のベジェを２つのベジェへ分割する」かどうかが変わる。
   １つのベジェを２つのベジェへ分割するには、「過程の点」を使う。
   （分割について詳しくは前回も参照したこちらのサイトさんを参照してください）
5. 4象限分のベジェを作成したら、最後にその各ベジェを、１つの「ベジェ曲線のデータ」として結合して return して、終了。

ellipse2bezierPoints() は以上のような流れで、楕円をベジェデータに変換しています。

実際のプログラムは下記です。

上記１～５の説明の出だしをプログラムの中のコメントで書いてあるので、上記流れの説明との対応関係がわかると思います。

楕円→ベジェデータ変換の ellipse2bezierPoints()  のプログラムリスト：

自作 JavaScript 関数 drawBezierPoints()

変換で作成された「ベジェ曲線のデータ」をもとに、cc.beziercurveTo() メソッドを使ってベジェ曲線を描画します。

「ベジェ曲線のデータ」は1次元配列ですが、最初に描画開始の点、その次から cc.bezierCurveTo() に渡す3つの点が cc.bezierCurveTo() の回数分繰り返される、というようなフォーマットになっています。

ベジェデータ描画の drawBezierPoints() のプログラムリスト：

test2[20180202-obj／Microsoft Excel]

この関数はベジェのデータ・フォーマットの通りに点１～３を取り出して、bezierCurveTo() を行う内容になっています。

cc.bezierCurveTo() は下図のようなメソッドです。

この bezierCurveTo() に渡す各点を、事前に 3D 計算してから bezierCurveTo() に渡してやると、ベジェ曲線が 3D 空間に描かれます。

2022/8/26（金）

PC-9801用　Windows 3.1　その１

このヤフオクの入札１件、私ですねぇ。

2022/8/15（月）

Excel 図形 → JavaScript 変換　その４

前回からのつづきで、

＞だからこのあと、楕円をベジェのハンドルで表現する作業（楕円→ベジェの変換）をやらなければなりません。

ということで、「楕円をベジェ曲線に変換する」というのを現在行っています。

下図は、

赤い点が、「楕円を描く式」で描いた楕円。

緑の太い線が、「JavaScript のビルトイン関数（最初から用意されている関数）」で描いた楕円の一部。

そして、オレンジ色の細い線が「ベジェの計算」で描いた同じ楕円の一部です。

ちゃんとベジェで描くことが出来ましたが、結構大変でした。

必要だった計算は、

1. ベジェ曲線の計算のしかた（結局は使わない結果になりましたが、大変参考になりました）　参考サイトさん
   このサイトさんの最初のほうに載っている「ベジェ曲線の数式」は難しくて私には全然わからなかったのですが、後のほうの小題「3次のベジェ曲線を数式で」の Swift プログラムをコピペして JavaScript に書き換えました。
   ベジェ曲線を描くことができ、良かったんですが、
   でも、これは「数式を使って、あらかじめ決まったベジェ曲線を描く方法」であり、「任意の角度から始まる楕円の一部」を描きたい場合には不向きなようでした。
   「任意の角度から始まる楕円の一部」を描くことに対応するためには、「楕円の4半円のベジェ」（下記2番で得られるベジェ曲線）を分割する必要があります。任意の角度は、楕円上の1点を指し示し、そこからベジェ曲線を描くことになります。
   その1点でベジェ曲線を分割するためには、その曲線上の1点を得るために使用した、ベジェを描く原理（手順）の点情報が必要になります。
   結局は、下記の3番のサイトさんの、小題「アルゴリズム」（原理）を見ながら、自分で「ベジェ曲線の描画」をプログラムすることになりました。
2. 楕円をベジェ曲線で描く方法　参考サイトさん
   必要な数式は、このサイトさんの上から１／３付近にありました。
   ＞長辺側の補助線長さ = 4 / 3 * ( sqrt( 2 ) - 1 ) *短辺長さ
   ＞短辺側の補助線長さ = 4 / 3 * ( sqrt( 2 ) - 1 ) *長辺長さ
   ということですが、数式の一部は、0.552 ということなので、
   長辺側の補助線長さ = 0.552 *短辺長さ
   短辺側の補助線長さ = 0.552 *長辺長さ
   となりました。どの楕円も、ベジェを描くにはこの計算になる、とは意外ですね。
3. ベジェ曲線を途中で分割する方法　参考サイトさん
   このサイトさんの小題「再帰を利用した手法」の説明で、１つのベジェ曲線を２つのベジェ曲線へ分割することが出来ました。
   （でもどうしてその方法で分割できるのかは、理由がわかりませんでした）

cygwin、gcc、mingw、そして Clan の関係性　再度修正

先月７／２２に、同題名の記事を書きましたが、その中の図がまだ間違っていることに気付いて、今日になって修正をしました。

下図は修正した図です。

詳しくは、同記事へ飛んでください。

2022/8/13（土）

Excel 図形 → JavaScript 変換　その３

下図の左が Excel の画面、右がインターネットブラウザの画面です。

Excel VBA により、Excel シート上の図形が .js ファイルへ「ドローデータ」として保存されます。

「ドロー」とは点の位置や、線の長さ、曲線の曲がり具合などを数値として示した画像データのことです。

その .js をデータとして JavaScript で読み取り、データの通りに描画したものが上図の右側というわけです。赤丸急上昇

データがネイティブになっている、という名の難問

Excel で作成できる図形には種類があり、

1. 複雑な曲線（ベジェ曲線）で作成されるフリーフォームという図形
2. オートシェイプと呼ばれる図形
3. オートシェイプの中に特殊な「点」があり、その点を動かすと図形の形状が太くなったり細くなったりと変えられる図形

の3種類が、大まかですが あります。

この 1 番と 2 番は「データとして何ら問題ない」のですが、今非常に困っているのが、3 番の「点を動かすと形が変わる図形」です。

▼黄色い「点」、つまり黄色い「◆」のある図形は、「◆」を動かすとその形を変えられる。

このタイプの図形は、「◆」の位置情報はデータとして読めるのですが、かんじんの「形のデータ」がどこにもないんです。

たとえば、上図の月なら、月を満ち掛けさせる「◆」の位置情報はあるけど、かんじんの月の形のデータがナイ！

星を太らせたりやせさせたりする「◆」の位置情報はあるけど、かんじんの星の形のデータがナイ！

▼これら小さな■で示される、「形のデータ」が VBA 上にナイ～！

それから、すべての図形が持っている「AutoShapeType」というプロパティを、たとえば msoMoonShape という数値から、msoStarShape という数値へ VBA で「変更するだけ」で、月だったものが星へ、一瞬にして切り替わる！　AutoShapeType に代入するだけで不思議と変わる！

それで もしかしてと思いました、

つまり（たぶんですが）、

「msoMoonShape なら、それを描く専用の関数があり、その中で月を描いてる」

「msoStarShape ならそれを描く専用の関数があり、その中で星を描いてる」

…となっていて、つまり平たく言うと、形を描くところは「ネイティブになっている」、ということのようです。

（ネイティブ：Excel 内部の機械語の状態でしか存在していない）

ベジェのデータさえあれば良いので、月や星を「フリーフォーム」（ベジェデータだけで構成される）タイプの図形に変換する VBA のメソッドはないかなと思って探したんですが、ありませんでした。

その時点で私のこの「Excel 図形 → JavaScript 変換のプログラム」は、とても困難になってしまう、ということが確定してしまうんです。

”してしまう” じゃなくて、確定しました。

ネイティブになっている描画を自作しよう

それで、今回一番最初の図で示した通り、Excel の「月の満ち欠け」 が JavaScript で再現されているんですが、それはとても大変でした。

1. 月の欠けと楕円の大きさの関係を調査	2. 調査の通りの楕円を得る数式を試行錯誤	3. そして、これでいいかなと思った数式。
← 月が欠けるほど、 赤い楕円の縦幅は せまくなる。 またその位置も左へずれていく。 Excel のこの動きをピッタリ再現しなければならない！	緑のグラフの「要所」（point）に沿うように、赤のグラフを、数式を変えて近づけていく作業。 表中の adjust は「★」の位置情報 0 ～ 0.875　です。	JavaScript です。

まぁ、後から気付いたんですが、JavaScript で再現できても、その図形を JavaScript で 3D 回転させたい場合、「◆」の位置をベースにした上記の図形の描き方だと、ダメ（正しく3D回転できない）なんじゃないかなぁと。

だからこのあと、楕円をベジェのハンドルで表現する作業（楕円→ベジェの変換）をやらなければなりません。

「◆」を持った図形は Excel には他にもたくさんありますが、それら１つ１つ調査したりはできないので、「顔の眉毛でよく使っている月図形」のように、実際に絵を描くときに使っている図形に限る必要があります。

2022/8/7（日）

おそなえもの

おそなえものを買ってきました。（左写真）

おそなえものを飾る準備はなかったので、誰かが退職時に私にくれた贈り物の小タオルで飾りました。（右写真）

→ → →

ご先祖様には子供もいるんじゃないか、と思ってお菓子も付けました。

（訪問者のどんなニーズと この記事がつながるか）

• 日記を読みたい